<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import myBindPhoneNumber from "@/components/my-bindPhoneNumber/index";

import twoItem from './newChild/twoItem.vue'
import oneItem from './newChild/oneItem.vue'
import paintingSwiper from './newChild/paintingSwiper.vue'
import { getCategoryList } from '@/api/home';
import { toPage } from './public.js'
import { getToken } from '@/utils/auth'

import { useUserStore, useAppStore } from '@/store'


import { ref } from 'vue';
import { onLoad, onShow, onReady } from '@dcloudio/uni-app';


const userStore = useUserStore()
const appStore = useAppStore()


const featureObj = ref({
  oneList: [],
  twoList: [],
  threeList: [],
  fourList: [],
  fiveList: [],
})

const opacity = ref(1)  // 默认不透明
const oldScrollTop = ref(0)  // 默认滚动高度
const scrollTop = ref(0)  // 默认滚动高度

const showPage = ref(true)


function beforeleave() {
  showPage.value = false
  setTimeout(() => {
    showPage.value = true
  }, 0);
}

// 获取首页菜单
async function getCategoryListFn() {
  const res = await getCategoryList(10)
  appStore.setHomeCategoryList(res.data)
  res.data.forEach(item => {
    switch (item.isMainMenu) {
      case 1:
        featureObj.value.oneList.push(item)
        break;
      case 2:
        featureObj.value.twoList.push(item)
        break;
      case 3:
        featureObj.value.threeList.push(item)
        break;
      case 4:
        featureObj.value.fourList.push(item)
        break;
      case 5:
        featureObj.value.fiveList.push(item)
        break;
    }
  })
}

// 回到顶部
function backTopFn() {
  scrollTop.value = Math.random() * 0.1
  oldScrollTop.value = scrollTop.value
}

// 滚动事件
function scroll(e) {
  oldScrollTop.value = e.detail.scrollTop - 20
  opacity.value = Math.max(1 - (e.detail.scrollTop - 20) / 400, 0)
}

onReady(() => {
  // myBindPhoneNumber.showBingPhone()
})

onShow(() => {
  if (getToken()) {
    userStore.getUserInfo()
  }
})

onLoad((e) => {
  if (e.scene) {
    uni.setStorageSync('inviteCode', e.scene)
  }

  getCategoryListFn()
})
</script>

<template>
  <div class='painting'>
    <NavBar style="opacity: 0;"></NavBar>
    <scroll-view :scroll-top="scrollTop" scroll-y @scroll="scroll" scroll-with-animation class="scrollView">
      <paintingSwiper :opacity="opacity"></paintingSwiper>

      <div class="one_box" :style="{ opacity: opacity }">
        <oneItem :list="featureObj.oneList"></oneItem>
      </div>

      <div class="fixed_one_box">
        <div class="bgColor" :class="{ show: oldScrollTop >= 320 }"></div>
        <div class="fixed_one_content" :class="{ show: oldScrollTop >= 320 }">
          <oneItem :list="featureObj.oneList"></oneItem>
        </div>
      </div>

      <div class="two_box" :style="{ opacity: opacity }">
        <twoItem :list="featureObj.twoList"></twoItem>
      </div>

      <div class="item_box" style="margin-top: 0;" v-if="featureObj.threeList?.length">
        <div class="label_box">
          <img src="/static/imgs/painting/label.png" class="labelImg" alt="">
          热门创作
        </div>
        <div class="three_box">
          <div class="three_item" v-for="item of featureObj.threeList" @click="toPage(item)">
            <img :src="item?.imageUrl" class="cover" mode="aspectFill" alt="">
            <div class="text">{{ item?.title }}</div>
          </div>
        </div>
      </div>



      <div class="item_box">
        <div class="label_box">
          <img src="/static/imgs/painting/Group 1142814088.png" class="labelImg" alt="">
          更多玩法
        </div>
        <div class="four_box">
          <div class="four_item" v-for="item of featureObj.fourList" @click="toPage(item)">
            <img :src="item?.imageUrl" class="cover" mode="aspectFill" alt="">
            <div class="four_item_label">{{ item?.title }}</div>
            <div class="four_item_text">{{ item?.description }}</div>
          </div>
        </div>
      </div>


      <div class="item_box">
        <div class="label_box">
          <img src="/static/imgs/painting/label.png" class="labelImg" alt="">
          全民舞王
        </div>
        <div class="five_box" v-for="item of featureObj.fiveList" @click="toPage(item)">
          <img :src="item?.imageUrl" class="cover" mode="aspectFill" alt="">
          <div class="five_title">{{ item?.title }}</div>
          <div class="five_text">{{ item?.description }}</div>
          <img :src="item?.imageIconUrl" class="iconImg" mode="aspectFill" alt="">
          <div class="five_btn">立即体验</div>
        </div>
      </div>
    </scroll-view>

    <img class="backTop" :class="{ show: oldScrollTop >= 300 }" src="/static/imgs/painting/backTop.png" mode="widthFix"
      @click="backTopFn" alt="">

    <Tabbar :active="1"></Tabbar>
  </div>
  <van-toast id="van-toast"></van-toast>
  <my-bindPhoneNumber id="my-bindPhoneNumber"></my-bindPhoneNumber>
  <div v-if="showPage">
    <page-container :show="showPage" :overlay="false" @beforeleave="beforeleave"></page-container>
  </div>
</template>

<style lang='scss' scoped>
::v-deep {
  .van-popup {
    background-color: var(--a-adapter-bg-color) !important;
  }
}

.painting {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #240E3D;
  overflow: hidden;

  .scrollView {
    flex: 1;
    height: 1rpx;
  }

  .one_box {
    box-sizing: border-box;
    margin-top: 32rpx;
    padding: 0 30rpx;

    .one_item {
      width: 156rpx;
      height: 150rpx;

      .one_item_img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .fixed_one_box {

    .bgColor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 330rpx;
      padding-bottom: 20rpx;
      background-color: #131130;
      opacity: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;

      &.show {
        opacity: 1;
        z-index: 2;
      }

    }

    .fixed_one_content {
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 100%;
      z-index: 2;
      width: 100%;
      height: 330rpx;
      padding-bottom: 20rpx;
      opacity: 0;
      transition: all 0.6s;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 30rpx;

      &.show {
        left: 0;
        opacity: 1;
      }
    }
  }

  .two_box {
    margin-top: 40rpx;

    .two_box_swiper {
      height: 100%;

      .two_box_swiper_item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 49rpx;

        .two_item {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12rpx;
          font-size: 24rpx;
          color: #E6F1FA;
          margin: 32rpx 84rpx 0 0;

          &:nth-child(4n) {
            margin-right: 0;
          }

          &:nth-child(-n+4) {
            margin-top: 0;
          }


          .two_item_imgBox {
            width: 100rpx;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #221F49;
            border-radius: 24rpx;

            .two_item_img {
              width: 54rpx;
              height: 54rpx;
            }
          }
        }
      }
    }
  }

  .item_box {
    margin-top: 40rpx;
    padding: 0 30rpx;

    .label_box {
      display: flex;
      align-items: center;
      gap: 16rpx;
      font-size: 32rpx;
      color: #FFFFFF;

      &:not(:first-child) {
        margin-top: 47rpx;
      }


      .labelImg {
        width: 38rpx;
        height: 38rpx;
      }
    }

    .three_box {
      display: flex;
      align-items: center;
      gap: 21rpx;
      height: 297rpx;
      margin-top: 29rpx;
      overflow-x: auto;
      overflow-y: hidden;

      &::-webkit-scrollbar {
        display: none;
      }

      .three_item {
        flex-shrink: 0;
        width: 216rpx;
        height: 297rpx;
        border-radius: 15rpx;
        position: relative;

        .cover {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }

        .text {
          position: absolute;
          bottom: 10rpx;
          width: 100%;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }

    .four_box {
      display: flex;
      // align-items: center;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 21rpx;
      // height: 400rpx;
      height: 850rpx;
      margin-top: 29rpx;
      overflow-x: auto;
      overflow-y: hidden;

      &::-webkit-scrollbar {
        display: none;
      }

      .four_item {
        flex-shrink: 0;
        width: 336rpx;
        height: 400rpx;
        border-radius: 15rpx;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 90rpx;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
          border-radius: 0rpx 0rpx 20rpx 20rpx;
        }

        .cover {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }

        .four_item_label {
          position: absolute;
          bottom: 40rpx;
          width: 100%;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          z-index: 1;
        }

        .four_item_text {
          position: absolute;
          bottom: 10rpx;
          width: 100%;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.6);
          text-align: center;
          z-index: 1;
          text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.2);
        }
      }
    }

    .five_box {
      position: relative;
      height: 801rpx;
      border-radius: 15rpx;
      margin-top: 25rpx;

      .cover {
        width: 100%;
        height: 100%;
        border-radius: 15rpx;
      }

      .five_title {
        position: absolute;
        top: 36rpx;
        left: 40rpx;
        font-size: 42rpx;
        color: #FFFFFF;
        font-weight: bold;
      }

      .five_text {
        position: absolute;
        top: 105rpx;
        left: 40rpx;
        font-size: 26rpx;
        color: #FFFFFF;
        font-weight: bold;
      }

      .iconImg {
        position: absolute;
        left: 50rpx;
        bottom: 144rpx;
        width: 188rpx;
        height: 217rpx;
      }

      .five_btn {
        position: absolute;
        bottom: 40rpx;
        left: 26rpx;
        right: 26rpx;
        height: 87rpx;
        background: linear-gradient(90deg, #C3EAFF 0%, #A3B4FB 100%);
        border-radius: 44rpx;
        font-weight: bold;
        font-size: 30rpx;
        color: #212121;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .backTop {
    position: fixed;
    bottom: 250rpx;
    right: 30rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    transition: all 0.6s;
    transform: scale(0);
    opacity: 0;

    &.show {
      transform: scale(1);
      opacity: 1;
    }
  }
}
</style>